<template>
	<view class="activity-seat">
		<view style="background-color:  #4BA677; height: 160rpx;"></view>

		<view class="top d-inline-block">
			<view class="goods d-flex" style="margin-top: -90rpx;">
				<u-image width="269rpx" height="156rpx" radius="10rpx"></u-image>
				<view class="d-flex justify-space-between flex-column flex-grow-1" style="margin-left: 20rpx;">
					<view>
						<view class="name">{{ data.name }}</view>
						<view class="status">{{ data.status }}</view>
					</view>
					<view class="flex-between">
						<price :value="data.price" color="#4BA677"></price>
						<view class="rest">
							剩余：{{ data.rest }}名
						</view>
					</view>
				</view>
			</view>

			<view class="section_5">
				<view style="margin-bottom: 30rpx;">活动时间：2022/05/01-05/05</view>
				<view>活动地址：上海市和平饭店</view>
			</view>

			<u-line margin="30rpx 0" color="#E5E5E5"></u-line>

			<view class="flex-center text-center">
				<view class="progress flex-align">
					<view>
						<view>选座开始</view>
						<view>12.12 15:00</view>
					</view>
					<view class="line"></view>
					<view>
						<view>选座结束</view>
						<view>12.13 15:00</view>
					</view>
					<view class="line"></view>
					<view>
						<view>活动开始</view>
						<view>12.13 15:00</view>
					</view>
					<view class="line"></view>
					<view>
						<view>活动结束</view>
						<view>12.13 15:00</view>
					</view>
				</view>
			</view>

			<u-line margin="30rpx 0" color="#E5E5E5"></u-line>

			<view class="notify flex-align" style="padding-bottom: 30rpx;">
				<view class="flex-align" style="margin-right: 20rpx;">
					<u-text text="通" color="#323030" bold></u-text>
					<u-text text="告" color="#feb307" bold></u-text>
				</view>
				<view>12号~15号停车场不对外开放,请各位车主注意...</view>
			</view>
		</view>

		<u-gap height="20rpx" bgColor="#F3F3F3"></u-gap>

		<view class="rase-detail">
			<view class="item">
				<view class="title">主办单位</view>
				<view class="value">苏州市体育中心</view>
			</view>
			<view class="item">
				<view class="title">承办单位</view>
				<view class="value">苏州市体育中心</view>
			</view>
			<view class="item">
				<view class="title">协办单位</view>
				<view class="value">苏州市体育中心</view>
			</view>
			<view class="item">
				<view class="title">支持单位</view>
				<view class="value">苏州市体育中心</view>
			</view>
		</view>

		<u-gap height="20rpx" bgColor="#F3F3F3"></u-gap>

		<u-tabs :list="tabsList" lineColor="#4BA677" :activeStyle="{
						  color: '#4BA677 ',fontWeight: 'bold',}" :inactiveStyle="{ color: '#666666',}"
			itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30" :current="currentTab"
			@click="onClickTab" />

		<view class="bottom-add-btn flex-align">
			<view class="flex-center flex-column" style="margin-right: 50rpx; white-space: nowrap; font-size: 24rpx;">
				<u-icon name="phone-fill" color="#333" size="24"></u-icon>
				<view>店铺客服</view>
			</view>
			<u-button text="立即选座" shape="circle" @click="show = true"
				color="linear-gradient( 270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%)"></u-button>
		</view>
		<con-alert :show="show" @close="close" isFooter @click="buy">
			<view class="popup-content">
				<view class="goods d-flex">
					<u-image width="269rpx" height="156rpx" radius="10rpx"></u-image>
					<view class="d-flex justify-space-between flex-column flex-grow-1" style="margin-left: 20rpx;">
						<view class="name">{{ data.name }}</view>
						<view>
							<view class="status">{{ data.status }}</view>
							<price :value="data.price" color="#4BA677"></price>
						</view>
					</view>
				</view>

				<view class="choose-category">
					<view style="margin-bottom: 30rpx;">选择赛事场地</view>

					<view class="d-flex flex-wrap" style="margin-left: -30rpx;">
						<view v-for="(item, index) in category" :key="index">
							<u-tag :text="item.text"
								:bgColor="chooseCategory === index ? 'rgba(75, 166, 119, 0.05)' : '#EFEFEF'"
								:borderColor="chooseCategory === index ? ' #4BA677' : 'rgba(0,0,0,0)'"
								:color="chooseCategory === index ? ' #4BA677' : item.disabled ? '#fff' : '#333'"
								:disabled="item.disabled" @click="chooseCategory = index" />
						</view>
					</view>
				</view>
			</view>
		</con-alert>
	</view>
</template>

<script>
	import conAlert from "@/components/com-alert/com-alert.vue"
	export default {
		components: {
			conAlert
		},
		data() {
			return {
				show: false,
				data: {
					name: 'CBA苏州市体育中心',
					status: '进行中',
					price: 888,
					rest: 8
				},
				currentTab: 0,
				tabsList: [{
						name: '选座须知'
					},
					{
						name: '活动介绍'
					},
					{
						name: '精彩瞬间'
					}
				],
				category: [{
						text: '2021-12-15 星期五 12:00'
					},
					{
						text: '2021-12-16 星期六 12:00'
					}
				],
				chooseCategory: 0
			}
		},
		methods: {
			close() {
				this.show = false
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
			},
			buy() {
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'none',
						duration: 850
					});
					// setTimeout(() => {
					// 	uni.reLaunch({
					// 		url: '/pages/personal/personal'
					// 	})
					// }, 1000)
				} else {
					uni.navigateTo({
						url: '/page_points/activity-seat/seat-selection/choose-area/choose-area'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-seat {
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));

		.top {
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			padding: 0 30rpx;
			margin-top: -30rpx;
			width: 100%;

			.name,
			.status {
				color: #fff;
			}
		}

		.goods {
			.name {
				font-size: 28rpx;
			}

			.status {
				font-size: 24rpx;
			}

			.rest {
				color: #BEBEBE;
				font-size: 22rpx;
			}
		}

		.section_5 {
			margin-top: 30rpx;
			padding: 30rpx 31rpx 31rpx;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 23rpx;
			border-radius: 5rpx;
			background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16512007100218816344.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.progress {
			font-size: 24rpx;
			white-space: nowrap;

			.line {
				width: 40rpx;
				height: 6rpx;
				background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
				border-radius: 10px;
				margin: 0 10rpx;
			}
		}

		.notify {
			font-size: 24rpx;
		}

		.rase-detail {
			padding: 30rpx;
			font-size: 30rpx;

			.item {
				&+.item {
					margin-top: 30rpx;
				}
			}

			.title {
				color: #6f6f6f;
				margin-bottom: 10rpx;
			}
		}

		.popup-content {

			.choose-category {
				height: 27vh;
				margin-top: 50rpx;

				/deep/.u-tag {
					margin-left: 30rpx;
					margin-bottom: 30rpx;
				}
			}
		}
	}

	.bottom-add-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		z-index: 1;
	}
</style>